<template>
    <div class="home-page">
        <van-swipe :autoplay="3000">
            <van-swipe-item class="image">
                <img src="../../assets/images/donator/M-278547-4236F9E4.jpg" width="100%" height="100%" />
            </van-swipe-item>
            <van-swipe-item class="image">
                <img src="../../assets/images/donator/780 (1).jpg" width="100%" height="100%" />
            </van-swipe-item>
            <van-swipe-item class="image">
                <img src="../../assets/images/donator/780 (2).jpg" width="100%" height="100%" />
            </van-swipe-item>
            <van-swipe-item class="image">
                <img src="../../assets/images/donator/780.jpg" width="100%" height="100%" />
            </van-swipe-item>
        </van-swipe>
        <van-cell-group title="相信你的力量，它可以改变很多事情！">
            <van-cell is-link v-for="project in fundraisingProjects" :key="String(project.fundraisingProjectsId)"  
            :to="'/projectDetail/' + project.fundraisingProjectsId"
        >
                <template #title>
                    <div class="project-name">
                        <img :src="imageUrl + project.fundraisingProjectsPhoto" width="100px" height="50px" />
                        <div class="project-info">
                            <span style="font-weight:bold;">{{ project.fundraisingProjectsName }}</span>
                            <span style="font-size: smaller;">{{ project.fundraisingProjectsIntroduction }}</span>
                        </div>
                    </div>
                </template>
            </van-cell>
        </van-cell-group>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { donatorApi } from '../../api/app';
import { imageUrl } from '../../api/request';
import { IFundraisingProject } from './ts/commen';

/** 募捐项目列表 */
const fundraisingProjects = ref<IFundraisingProject[]>([]);

onMounted(() => {
    donatorApi.getFourFundraisingProjects().then((res: any) => {
        if (res) {
            fundraisingProjects.value = res;
        }
    })
})
</script>

<style scoped lang="less">
.home-page {
    height: 100vh;
    width: 100vw;
    background-color: #e1ecfe69;
    overflow: auto;
    padding-bottom: 50px;

    .image {
        width: 100%;
        height: 10rem;
    }

    .project-name {
        display: flex;
        align-items: center;
    }

    .project-info {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
    }
}
</style>